<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>证书下载</title>
</head>

<body>

    <div class="loadingWrap" id="loadingWrap" style="display: none;">
        <div>
            <div class="lds-roller">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div>
                <h2>加载中</h2>
            </div>
        </div>
    </div>

    <div style="display: flex;align-items: center;justify-content: center;" id="main">
        <label for="">分类:</label>
        <select id="catlog">
            <option value="科幻画">科幻绘画</option>
            <option value="科幻童话">科幻童话</option>
            <option value="科幻小说">科幻小说</option>
        </select>
        <label for="">身份证:</label>
        <input id="idnumber" type="text">
        <button id="search_user">查询</button>
    </div>

    <div id="show_info" class="show_info" style="display: none;">
        <table border="1">
            <tbody>
                <tr>
                    <td colspan="2" class="title">第四届青少年科普科幻创作活动</td>
                </tr>
                <tr>
                    <td>学生姓名</td>
                    <td id="name"></td>
                </tr>
                <tr>
                    <td>就读学校</td>
                    <td id="school"></td>
                </tr>
                <tr>
                    <td>科目</td>
                    <td id="subject"></td>
                </tr>
                <!-- <tr>
                    <td>分数</td>
                    <td id="score"></td>
                </tr> -->
                <tr>
                    <td>荣获奖项</td>
                    <td style="color: #ff9933; font-weight: bolder;" id="level"></td>
                </tr>
            </tbody>
        </table>
        <div class="infoAndDate" style="text-align: center; color: #ccc;">
            <p> 北京市海淀区中小学信息科技教育协会
            </p>
            <p> 2022年2月9日 </p>
        </div>

    </div>

    <script type="module" src="./app.ts"></script>
</body>

</html>